import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import '@/components/MusicHall/index/SongList/SongList.scss'
import Banner from '@/components/MusicHall/index/SongList/Banner';
 class SongList extends Component {
    constructor (props) {
        super(props)
        this.state = {
            bannerList : [],
            e: ''
        }
    }
    seek=(e)=>{
        // console.log(e);
        fetch('https://api.bzqll.com/music/netease/search?key=579621905&s='+e+'&type=list&limit=5&offset=0')
            .then(res => res.json())
            .then(data => {
                // console.log(data.data.playlists)
                this.setState({
                    bannerList : [...data.data.playlists],
                    e : e
                })
            })        
    }
    render () {
        if (this.state.e === '') {
            this.seek('推荐')
        }
        return (
          <div className='songlist'>
            <h3>歌 单 推 荐</h3>
            <ul className='mod_index_tab'>
                <li>
                    <NavLink to="/musichall/index" onClick={(e)=>{this.seek('推荐')}}>为你推荐</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/index/jd" onClick={(e)=>{this.seek('经典')}}>经典</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/index/ktv" onClick={(e)=>{this.seek('KTV')}}>KTV热歌</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/index/jdgy" onClick={(e)=>{this.seek('国语')}}>经典国语</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/index/gfgd" onClick={(e)=>{this.seek('官方歌单')}}>官方歌单</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/index/qg" onClick={(e)=>{this.seek('情歌')}}>情歌</NavLink>
                </li>
            </ul>
            <Banner list={this.state.bannerList}/>
          </div>
        )
    }     
 }

export default SongList;